/**
 *  <xxx-xxx  model = "{{}}" splitChar = "{{}}" on-change="{{}}" data="{{}}" defaultVal="{{}}"></xxx-xxx>
 * model[Array]: 数据改变时的存储数组
 * splitChart[string]: 分割字符 ，默认 '/'
 * on-change[event]: model数组发生改变时候的响应(san对于数组重set，双向绑定似乎监视不到，加on-change保证可以获取对的值)
 * data[Array]: 渲染的数据
 * defaultVal[Array] 预先默认值
 */


const { defineComponent } = require('/js-modules/common/san/san.js')
const Contain = require('./contain')
const {preStop} = require('commonFun')

const Cascader = defineComponent({
    template: `
        <div class="s-cascader" on-click="dropIt" style="border-bottom: {{ isClicked ? 'none' : '' }}">
            <span class="s-cascader-label" style="color: {{ !indexModel || !indexModel.length ?'#ccc' : '' }}">
                <template s-for="v, k in indexModel">
                    {{ v.label }}
                    <template s-if = "k != indexModel.length - 1">{{ splitChar || '/' }}</template>
                </template>
                <template s-if="!indexModel || !indexModel.length">{{ placeholder || '请选择' }}</template>
            </span>
            <i class="iconfont icon-chevron-down {{isClicked ? 'ro180' : ''}}">&#xe600;</i>
            <yo-contain
                defaultVal = "{{ defaultVal }}"
                s-if = "isClicked"
                list = "{{ data }}"
                model = "{= model =}"
                on-change = "change" >
            </yo-contain>
        </div>
    `,
    inited () {
        const defaultVal = this.data.get('defaultVal') || []
        this.data.set('indexModel', defaultVal)

        this.watch('data.length', v => {
            if (v === 0) {
                this.data.set('data', [{
                    id: '',
                    label: '暂无数据',
                    disabled: true
                }])
            }
        })
    },
    components: {
        'yo-contain': Contain
    },
    change (model) {
        const lastIndex = model.length - 1
        const item = model[lastIndex]
        if (!item.id) {
            this.data.set('indexModel', [])
        } else {
        }
        this.data.set('indexModel', model, { force: true })
        this.fire('change', model)
        this.nextTick(() => {
            if (!item.nodes) {
                this.data.set('isClicked', false)
            }
        })
    },
    dropIt () {
        this.data.set('isClicked', !this.data.get('isClicked'))
    },
    initData () {
        return {
            isClicked: false,
            indexModel: [],
        }
    },
    attached () {
        {
            this.nextTick(() => {
                const data = this.data.get('data')
                if (!data || !data.length) {
                    this.data.set('data', [{
                        id: '',
                        label: '暂无数据',
                        disabled: true
                    }])
                }
            })
        }

        {
            $(document).on('click input focus propertychange change', 'body',(e) => {
                if (!this.el) return
                if(!this.el.contains(e.target)) {
                    this.data.set('isClicked', false)
                }
            })
        }
    }
})

module.exports = Cascader